<template>
  <!-- 表单 -->
  <table class="hu-table">
    <thead>
      <tr>
        <th
          v-for="(itemTitle, i) in data[0].row"
          :key="i"
          :style="`width:${cellWidth}px`"
        >
          {{ itemTitle.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item, index) in data"
        :key="index"
        @click="clickTr(item)"
        :class="item.disabled ? 'hu-disabled' : ''"
      >
        <!-- 表单数据 -->
        <td
          v-for="(itemContent, i) in data[index].row"
          :key="i"
          :style="`width:${cellWidth}px`"
        >
          {{ itemContent.attributesValue }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "HuTable",
  props: {
    // 路由id
    id: {
      type: String,
      default: "",
    },
    // 表单信息
    data: {
      type: Array,
      default: () => [
        // row 存储每行表格数据 disabled 该行是否禁用
        // { id: 1, row: [], disabled: true }
      ],
    },
    // 单元格宽度，默认120px
    cellWidth: {
      type: [String, Number],
      default: 120,
    },
  },
  data() {
    return {};
  },

  methods: {
    // 点击某一行
    clickTr(item) {
      if (item.disabled) return;
      this.$emit("row-click", item);
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/less/color.less";
.hu-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;

  td,
  th {
    width: 150px;
    box-sizing: border-box;
    border-right: 1px solid rgba(55, 56, 58, 0.08);
    border-bottom: 1px solid rgba(55, 56, 58, 0.08);
    word-break: break-all; // 强制英文换行
    /*超出长度...*/
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
  }
  td {
    background-color: #f8fbfe;
    padding: 12px 16px;
    text-align: center;
  }
  thead tr th {
    position: sticky;
    top: 0;
    background: @white;
    color: @gray-6;
    padding: 16px;
    text-align: center;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    background: @white;
  }
  th:first-child {
    z-index: 1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    background: @white;
  }
}
</style>
